<!-- view mask of "todo" UI widget -->
<markup id="todo">
	<div class="todo">
		<header class="todo__header">
			<h1 class="todo__h1">todos</h1>
			<input class="todo__new todo__input" placeholder="What needs to be done?" autofocus="autofocus">
		</header>
		<section class="todo__main">
			<input class="todo__toggle-all todo__input" type="checkbox">
			<label class="todo__toggle-label" for="todo__toggle-all">Mark all as complete</label>
			<ul class="todo__list">
				<markup id="item">
					<li class="todo__item {% if completed %}completed{% endif %}" data-id="{{id}}">
						<div class="todo__item--view view">
							<input class="todo__toggle toggle todo__input" type="checkbox"
								   {% if completed %}checked="checked"{% endif %}>
							<label class="todo__label">{{title}}</label>
							<button class="todo__destroy destroy todo__button">
						</div>
						<input class="todo__item--edit edit todo__input" value="{{title}}">
					</li>
				</markup>
			</ul>
		</section>
		<footer class="todo__footer">
			<span class="todo__count">
				<strong data-bind="data:status-items-remaining"></strong>
				<span data-bind="data:status-items-remaining-unit"></span> left
			</span>
			<ul class="todo__filters" data-bind="state:status-filter-selected">
				<li><a href="#" data-tag="all">All</a></li>
				<li><a href="#" data-tag="active">Active</a></li>
				<li><a href="#" data-tag="completed">Completed</a></li>
			</ul>
			<button class="todo__completed todo__button">
				Clear completed
			</button>
		</footer>
	</div>
</markup>
